<template>
  <view class="tabbar">
    <view class="tabbar-content">
      <view
        class="tabbar-item"
        v-for="(item, index) in list"
        :key="index"
        @click="changeTab(index)"
      >
        <template>
          <view class="select">
            <view class="i-t">
              <view v-if="index === 1">
                <image
                  v-if="current == index"
                  class="center-img"
                  mode="widthFix"
                  :src="item.selectedIconPath"
                ></image>
                <image class="center-img" mode="widthFix" :src="item.iconPath" v-else></image>
              </view>
              <view v-else>
                <image
                  v-if="current == index"
                  class="img"
                  mode="widthFix"
                  :src="item.selectedIconPath"
                ></image>
                <image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
              </view>
              <view class="text active" v-if="current == index">{{ item.text }}</view>
              <view class="text" v-else>{{ item.text }}</view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup name="tabBar">
import { tabBar } from '@/pages.json'
const props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
})
const list = ref(tabBar.list)

onShow(() => {
  uni.hideTabBar()
})

const changeTab = (e: string | number) => {
  uni.switchTab({
    url: '/' + list.value[e].pagePath,
  })
}
</script>

<style lang="scss" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  grid-template-columns: repeat(5, 1fr);
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  height: 175rpx;
  font-size: 22rpx;
  background: url('/static/tabbar/tabbar-bg.png') 100% no-repeat;

  background-size: 100% 100%;
}

.tabbar-content {
  display: flex;
  width: 100%;
  height: 48px;
  padding-bottom: 6px;
  background-color: #ffffff;
}

.tabbar-item {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: auto;
}

.center-img {
  width: 106rpx;
  height: 106rpx !important;
}
.img {
  width: 50rpx;
  height: 50rpx !important;
}
.text {
  color: #666666;
  text-align: center;
}
.i-t {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}
.text.active {
  color: $uni-color-primary;
}
</style>
